<template>
  <div class="home_container">
    <el-container>
      <!-- 头部 -->
      <el-header class="home_header">
        <!-- <span>hhh</span> -->
        <!-- 头像 -->
        <div class="hone_ava">
          <img src="@/assets/acatar.jpg" alt="" />
          <span>电商后台管理系统</span>
        </div>

        <!-- 按钮退出 -->
        <el-button type="info" @click="exitFn">退出</el-button>
      </el-header>

      <el-container>
        <!-- 左侧侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <el-col>
            <div class="home_zhe" @click="isCollapse = !isCollapse">|||</div>
            <!-- 左侧菜单区  -->
            <el-menu
              background-color="#e0aeda99"
              text-color="#fff"
              active-text-color="#c63fd3af"
              :collapse="isCollapse"
              :collapse-transition="false"
              unique-opened
              router
              :default-active="active"
            >
              <!-- 一级菜单 -->
              <el-submenu
                :index="val.id + ''"
                v-for="val in asideList"
                :key="val.id"
              >
                <!-- 一级菜单模块区 -->
                <template slot="title">
                  <i :class="IconList[val.id]"></i>
                  <span>{{ val.authName }}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item-group v-for="obj in val.children" :key="obj.id">
                  <el-menu-item
                    :index="`/${obj.path}`"
                    @click="activeFn(`/${obj.path}`)"
                  >
                    <!-- 图标 -->
                    <i class="el-icon-menu"></i>
                    <!-- 文本 -->
                    {{ obj.authName }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>

        <!-- 主体内容 -->
        <el-main>
          <!-- 二级路由挂载点 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 保存菜单列表
      asideList: [],
      // 折叠菜单区
      isCollapse: false,
      // 一级菜单icon图标
      IconList: {
        125: "iconfont  icon-users",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
      },
      // 保存的跳转路径 == 菜单高亮显示
      active: "",
    };
  },
  methods: {
    //退出登录
    exitFn() {
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("Path");
      this.$router.push("/login");
    },
    // 获取菜单
    async getFn() {
      const { data: res } = await this.$axios({
        method: "get",
        url: "menus",
      });
      if (res.meta.status !== 200) return;
      return (this.asideList = res.data);
    },
    // 保存激活路径 -- 高亮
    activeFn(activePath) {
      window.sessionStorage.setItem("Path", activePath);
      this.active = activePath;
    },
  },
  created() {
    // console.log(res);
    this.getFn();
    // 初始化的保存Path的路由高亮显示
    this.active = window.sessionStorage.getItem("Path");
    // console.log(this.asideList.data);
  },
};
</script>

<style lang="less" scoped>
.home_container {
  width: 100%;
  height: 100%;
}
.el-container {
  height: 100%;
  background-color: #e7b5dd99;
}

// 折叠面板
.home_zhe {
  width: 200px;
  text-align: center;
  line-height: 24px;
  letter-spacing: 3px;
  cursor: pointer;
  color: #000;
}

// 头部
.home_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-button {
    justify-content: center;
  }
  .hone_ava {
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      border: 1px solid #ccc;
      vertical-align: middle;
      margin-right: 8px;
    }
    span {
      font-weight: 700;
      font-size: 24px;
    }
  }
}
// 字体图标
.iconfont {
  margin-right: 8px;
  font-size: 18px;
  color: rgb(131, 82, 76);
}

// 侧边栏
.el-aside {
  height: 100%;
  background-color: rgba(200, 148, 193, 0.6);
}
// 主体内容
.el-main {
  background: #fff;
}

// 侧边栏边框
.el-menu {
  border: 0px;
}
</style>